<template>
  <div>
    <!-- 踩坑：自定义事件回调函数demo不能加（） -->
    <!-- <student @lihui="demo"></student> -->
    <student ref="student"></student>
    <school @click.native="show"></school>
    <h3>从子组件传回来的学生年龄：{{studentAge}}</h3>
  </div>
</template>

<script>
import student from './components/student.vue'
import school from './components/school.vue'

export default {
  name: 'App',
  components: {
    student,
    school
  },
  data () {
    return {
      studentAge: ''
    }
  },
  methods: {
    // demo (age) {
    //   console.log('我收到子组件的值了', age)
    // 1、可以通过这种赋值方式拿到子组件的数据
    //   this.studentAge = age
    // },
    show () {
      alert(123)
    }

  },
  mounted () {
    // 绑定自定义事件
    // this.$refs.student.$on('huihui', this.demo)

    // 2、还可以通过这种方式拿数据，注意：一定要写箭头函数
    this.$refs.student.$on('huihui', age => {
      console.log('我收到子组件的值了', age)
      this.studentAge = age
    })

    // 如果不写成箭头函数这里的this是触发‘huihui’事件的组件实例对象，即student组件
    // this.$refs.student.$on('huihui', function (age) {
    //   console.log(this);
    //   console.log('我收到子组件的值了', age)
    //   this.studentAge = age
    // })
  },
}
</script>

<style>
</style>